<template>
  <div>
    <el-upload
      action="http://gbpx.oscua.cn/api/oss/uploadBase64"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :limit="limit"
      :accept="accept"
      :on-remove="remove"
      :on-exceed="exceedOver"
      :on-success="uploadSuccess"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>

    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <!-- 图片超出限制提示-->
    <el-alert
      :title="errorTitle"
      type="error"
      closable
      v-if="isOver"
    >
    </el-alert>
  </div>
</template>

<script>
  export default {
    name: "uploadImg",
    props: {
      limit: {
        type: Number,
        default: 1
      },
      errorTitle: {
        type: String,
        default: ''
      },
      fileList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        accept: ".jpg,.jpeg,.png.JPG,.JPEG",
        isOver: false,
        dialogVisible: false,
        dialogImageUrl: ''
      }
    },
    methods: {
      //删除图片
      remove(file, fileList) {
        console.log(file, fileList);
      },
      //成功
      uploadSuccess(response, file, fileList) {
        console.log(response)
        if (response.code == 0) {
          this.$emit('uploadSuccess', response.data)
        } else {
          //错误
          this.$alert(response.msg)
        }
      },

      //图片预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      //超出限制后提示
      exceedOver(files, fileList) {
        if (fileList.length == this.limit) {
          this.isOver = true;
        }
      }
    }
  }
</script>

<style scoped>

</style>
